<html>

<head>
    <meta charset="UTF-8">
    <title>DeleteDialog-删除对话框效果</title>
    <link rel="stylesheet" href="content/bootstrap.css" />
    <style>
        /*删除对话框*/
        
        .delete-dialog {
            position: absolute;
            top: 90px;
            left: 50px;
            min-width: 180px;
            min-height: 80px;
            border: 1px solid #aaa;
            border-radius: 5px;
            box-sizing: content-box;
            z-index: 1000;
            background-color: #fff;
            display: none;
        }
        
        .delete-dialog .title {
            border-bottom: 1px solid #aaa;
            padding: 5px 12px;
            background-color: #f7f7f7;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        
        .delete-dialog .title .remove {
            float: right;
            cursor: pointer;
        }
        
        .delete-dialog .body {
            padding: 5px 12px;
        }
        
        .delete-dialog .msg {
            padding: 5px 0px;
            margin-bottom: 15px;
        }
        
        .delete-dialog .operation {
            text-align: right;
        }
        
        .delete-dialog .operation .btn.yes {
            margin-right: 5px;
        }
        
        .delete-dialog:after,
        .delete-dialog:before {
            position: absolute;
            top: -20px;
            left: 100%;
            border: solid transparent;
            content: '';
            height: 10px;
            width: 10px;
        }
        
        .delete-dialog:after {
            border-width: 9px;
            border-bottom-color: #f7f7f7;
            top: -18px;
            left: 50%;
            margin-left: -3px;
        }
        
        .delete-dialog:before {
            border-width: 10px;
            border-bottom-color: #aaa;
            top: -20px;
            left: 50%;
            margin-left: -4px;
        }
        
        .show {
            margin: 150px 150px;
        }
    </style>
</head>

<body>
    <div class="delete-dialog">
        <div class="arrow"></div>
        <div class="title">确认删除<span id="delete-remove" class="glyphicon glyphicon-remove remove"></span></div>
        <div class="body">
            <div class="msg">确定要所选文章删除？</div>
            <div class="operation"><span id="delete-yes" class="btn btn-sm btn-default yes">确定</span><span id="delete-no" class="btn btn-sm btn-default no">取消</span></div>
        </div>
    </div>

    <input id="show" class="btn btn-primary show" type="button" value="显示" />
    <script src="Scripts/jquery-2.2.3.js"></script>
    <script src="scripts/custom.js"></script>
    <script>
        $(function() {
            $("#show").click(function() {
                var offset = $(this).offset();
                $(".delete-dialog").css("top", offset.top + 44);
                $(".delete-dialog").css("left", offset.left - 75);
                $(".delete-dialog").show();
            });
            $("#delete-yes").click(function() {
                console.log('我被艹了');
            });
            $("#delete-remove,#delete-no").click(function() {
                $(".delete-dialog").hide();
            });
        });
    </script>
</body>

</html>